import React from 'react'
import ReactDOM from 'react-dom';
//react-router-dom
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect
} from 'react-router-dom'

import App from './../App';
import About from './About'

import Index from '../containers/index'
import CardList from '../containers/cardList/CardList'


import Detail from '../containers/Detail/Detail'
import FirstPage from '../containers/FirstPage/FirstPage'

// 如果是大型项目，router部分就需要做更加复杂的配置
// 参见 https://github.com/reactjs/react-router/tree/master/examples/huge-apps

class RouterMap extends React.Component {
    render() {
        return (

            <Router>
              <div>
                <Switch>
                  <Route exact path="/"  component={FirstPage}></Route>
                    <Route path='/detail/:id' component={Detail}/>
                  <Route path="/about" component={About}/>
                  <Route path="/app" component={App}/>
                  <Route path="/reportlist" component={CardList}/>
                  <Route component={NoMatch}/>
                </Switch>
                <Switch>
                  <Route exact path="/c"  component={App}></Route>
                  <Route path="/c/about" component={About}/>
                </Switch>
              </div>

            </Router>

        )
    }
}


const NoMatch = ({ location }) => (
  <div>
    <h3>No match for <code>{location.pathname}</code></h3>
  </div>
)

export default RouterMap
